<template>
  <div>
    <!-- 第一步：1.动态传递标题文字 父传子 -->
    <my-hearder title="购物车案例"></my-hearder>
    <!-- 第四步：渲染list的数据并且把每一项的对象传递给子组件渲染 -->
    <div class="main"><my-goods v-for="item in list" :key="item.id" :item="item" :list="list"></my-goods></div>

    <my-footer :list="list"></my-footer>
  </div>
</template>

<script>
import MyHearder from './components/MyHeader.vue'
import MyFooter from './components/MyFooter.vue'
import MyGoods from './components/MyGoods.vue'
export default {
  components: {
    MyHearder,
    MyFooter,
    MyGoods,
  },
  data(){
    return{
      list:[]
    }
  },
  //第三步：请求axios数据赋值给全局的list
  created(){
    this.$axios({
      url:'/api/cart'
    }).then(res=>{
      this.list=res.data.list
    })
  }
}
</script>

<style scoped>
.main {
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>
